<template>
  <el-row class="grid-container">
    <el-col :span="3">
      <div class="grid-content grid-content-title">
        <span v-if="left_require" class="req-remark">*</span>
        <span class="content-item content-title">{{ left_title }}</span>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="grid-content grid-content-content">
        <slot name="left_content" />
      </div>
    </el-col>
    <el-col :span="3">
      <div class="grid-content grid-content-title">
        <span v-if="right_require" class="req-remark">*</span>
        <span class="content-item content-title">{{ right_title }}</span>
      </div>
    </el-col>
    <el-col :span="9">
      <div class="grid-content  grid-content-content">
        <slot name="right_content" />
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'RowForm',
  props: {
    left_title: {
      type: String,
      default: ''
    },
    right_title: {
      type: String,
      default: ''
    },
    left_require: {
      type: Boolean,
      default: true
    },
    right_require: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      d: '0'
    }
  }
}
</script>

<style lang="scss">
  $theme_text: #0F8BFD;
  $backg:rgba(0,0,0,0);
  $deep_text: #5E5E5E;
  $border_line: #EDEDEF;

  .grid-container {
    // background-color: #f99;
    .grid-content {
      vertical-align: middle;
      font-size: 15px;
      height: 50px;
      line-height: 50px;
      // background-color: #9af;
      border-top: 1px solid $border_line;
      border-right: 1px solid $border_line;
      .req-remark {
        color: #FF6B6E;
        vertical-align: middle;
        font-size: 18px;
        margin-right: 3px;
      }
      .content-item{
        // background-color: aqua;
      }
    }
    .grid-content-title {
      text-align: center;
      // 禁止选中
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
    }
    .grid-content-content {
      padding: 0 10px;
    }
  }
</style>
